<template>
    <div class="chart" id="fourChart"></div>
</template>

<script>
import { inject, onMounted, reactive } from "vue";
import { line } from "../api/index.js";
import * as echarts from 'echarts'
export default {
  setup() {
    let lineData = reactive({});
    let data=[];
    let XData=[];
    function setData(){
    }
    async function getState() {
      data = await line();
      lineData=data;
      XData = lineData['dates']
      for(let i=0;i<XData.length;i++){
        XData[i]=XData[i].slice(5,10)
      }
    }
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("fourChart"));
      getState().then(() => {
        setData();
        myChart.setOption({
          tooltip:{
            trigger:'item',
            axisPointer:{
              type:'cross',
            },
          },
          grid: {
            left: "17%",
            right: "4%",
            bottom: "13%",
            height: "80%",
            width:"80%"
            },

          xAxis: {
            type: 'category',
            // name:'日期',
            // nameLocation:'start',
            // nameTextStyle:{
            //    color:'black',
            //    fontWeight:'bolder',
            //    fontSize:'16px',
               
            // },
            axisLine:{
              onZero:false,
            },
            axisLabel:{
              color:'#ec1f26',
              fontWeight:'bolder',
            },
            boundaryGap: false,
            data: XData
          },
          yAxis: {
            type: 'value',
            axisLabel:{
              color:'#ec1f26',
              fontWeight:'bolder',
              formatter: function(value){
               return value+"万";}
            },
          },
          series: [
            {
              data: lineData['boxOffices'],
              type: 'line',
              areaStyle: {}
            }
          ]
        });
      });
    });
  },
};
</script>

<style scoped>
.chart {
  height: 300px;
  width: 100%;
}

</style>